<template>
  <div>
    <!-- 商品列表 -->
    <div class="head" v-if="listShow">
      <van-nav-bar title=" 商品列表" left-text="返回" @click-left="returnFn">
        <template #right>
          <van-icon name="bars" @click="isShow = !isShow" />
        </template>
      </van-nav-bar>
      <van-dropdown-menu>
        <van-dropdown-item
          v-model="sortType"
          :options="option1"
          @click="drop(cow)"
        />
        <van-dropdown-item
          v-model="sortType"
          :options="option2"
          title="有货优先"
        />
        <van-dropdown-item
          v-model="sortType"
          :options="option3"
          title="销量优先"
        />
      </van-dropdown-menu>
    </div>
    <div class="hight11" v-if="listShow"></div>
    <!-- 商品列表 -->

    <!-- 大图显示 -->
    <div v-if="isShow">
      <van-grid
        :border="false"
        :column-num="1"
        :gutter="10"
        direction="horizontal"
      >
        <van-grid-item
          v-for="obj in sortedProductList"
          :key="obj.id"
          @click="productDetailsFn(obj)"
        >
          <van-image :src="obj.img" />
          <p style="font-size: 20px" class="product_names">{{ obj.name }}</p>
          <div>
            <span style="font-size: 20px; color: #dd001b"
              >￥{{ obj.price }}</span
            >
            <span style="font-size: 12px">销量：{{ obj.volume }}</span>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
    <div v-else>
      <van-grid :border="false" :column-num="2" :gutter="10">
        <van-grid-item
          v-for="item in sortedProductList"
          :key="item.id"
          @click="productDetailsFn(item)"
          style="width: 150px"
        >
          <van-image :src="item.img" />
          <span style="font-size: 20px" class="product_name">
            <span
              v-if="!item.isHave"
              class="quehuo"
              style="
                font-size: 10px;
                height: 20px;
                width: 30px;
                text-align: center;
                margin-right: 10px;
                background-color: #909090;
                color: #fff;
              "
              >缺货</span
            >
            <span
              v-if="!item.isDirect"
              style="
                font-size: 10px;
                height: 20px;
                width: 30px;
                text-align: center;
                margin-right: 10px;
                background-color: #dd001b;
                color: #fff;
              "
              >自营</span
            >
            {{ item.name }}
          </span>
          <div>
            <span style="font-size: 20px; color: #dd001b; padding: auto"
              >￥{{ item.price }}</span
            >
            <span style="font-size: 12px; padding: auto"
              >销量：{{ item.volume }}</span
            >
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getCommodityApi } from "@/api/swipe";
export default {
  data() {
    return {
      isShow: false,
      listShow: false,
      productList: "",
      sortType: "",
      value: "0",

      option1: [
        { text: "默认", value: 0 },
        { text: "价格由高到低", value: 1 },
        { text: "价格由低到高", value: 2 },
        { text: "销量由高到低", value: 3 },
        { text: "销量由低到高", value: 4 },
      ],
      option2: [{ text: "有货优先", value: 5 }],
      option3: [{ text: "销量优先", value: 6 }],
    };
  },
  methods: {
    returnFn() {
      this.$router.push({
        path: "/home",
      });
    },
    productDetailsFn(val) {
      if (val.isHave) {
        this.$router.push({
          path: "/listdetails",
          query: {
            item: val,
          },
        });
      } else {
        this.$toast("该商品缺货");
      }
    },
  },
  async created() {
    let { data } = await getCommodityApi();
    this.productList = data.data.list;
    this.listShow = this.$route.query.listShow;
  },
  //在商品列表中，使用一个计算属性sortedProductList来返回已按价格排序的商品列表。
  computed: {
    // 声明一个计算属性
    sortedProductList() {
      // 计算属性名称
      const list = this.productList.slice(); // 复制商品列表，以避免直接修改原始列表
      switch (
        this.sortType // 根据排序类型选择不同的排序函数
      ) {
        case 0:
          return list;
        case 1: // 如果是排序类型1，按价格降序排列
          return list.sort((a, b) => b.price - a.price);
        case 2: // 如果是排序类型2，按价格升序排列
          return list.sort((a, b) => a.price - b.price);
        case 3:
          return list.sort((a, b) => b.volume - a.volume);
        case 4:
          return list.sort((a, b) => a.volume - b.volume);
        case 5:
          return list.sort((a, b) =>
            a.isHave && !b.isHave ? -1 : b.isHave && !a.isHave ? 1 : 0
          ); //a有货而b没有货，则a排在b的前面
        //-1表示a应该排在b的前面，0表示它们的顺序不确定，1表示b应该排在a的前面。'排序
        case 6:
          return list.sort((a, b) => b.volume - a.volume);
        default: // 如果没有指定排序类型或排序类型不是1或2，返回未排序的商品列表
          return list;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.product-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.price-volume {
  display: flex;
  align-items: center;
}

.product-container {
  max-height: 3.2em;
  /* equivalent to two lines with 1.6em line-height */
  overflow: hidden;
}

.product_name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* limit to two lines */
  overflow: hidden;
  text-overflow: ellipsis;
}

.product_names {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* limit to two lines */
  overflow: hidden;
  text-overflow: ellipsis;
}
.head {
  position: fixed;
  z-index: 22;
  width: 100%;
}
.hight11 {
  height: 200px;
}
</style>
